<template>
  <div class="container">
    <top-com :topId='navId'></top-com>
    <div class="bannerCont">
      <div class="bannerMask">
        <div class="maskLeft">
          <div class="maskTitle">生活就用“本地鸟”</div>
          <div class="maskdes">一站式便民生活服务软件</div>
          <div class="maskVal">
            <p>您是否厌倦了在不同的平台上浪费时间找网购、美食、房源、工作、相亲、代办事项、二手物品、二手车等各类服务？现在，我们为您带来了一个全新的解决方案！全新上线的一站式同城便民生活服务软件！</p>
            <p>我们精心打造了8个功能模块，覆盖了您在同城生活中的各类需求，让您解决问题、提高效率的同时，享受便捷与实惠。</p>
          </div>
          <a href="#JoinInput" class="maskBtn">申请加盟</a>
        </div>
        <img src="static/img/bannerRight.png" />
      </div>
    </div>
    <div class="productCont">
      <div class="contName">
        <div class="contName_china">用户端展示</div>
        <div class="contName_Eng">Client display</div>
      </div>
      <div class="productMain">
        <div class="productNav">
          <div @click="productNavFn(index)" :class="productNavId==index?'productNavItemActive':'productNavItem'" :key="index" v-for="(item,index) in productNavArr">
            <img :src="item.img" />
            <div class="productNavName">{{item.val}}</div>
          </div>
        </div>
        <div class="productSwiper">
          <div class="productItem">
            <div class="phoneBox">
              <img class="phoneImg" src="static/img/phoneImg.png" />
              <div class="productImgCont">
                <img class="productImg" :src="productNavArr[productNavId].goodsImg" />
              </div>
            </div>
            <div class="phoneBox" v-if="productNavArr[productNavId].detailImg">
              <img class="phoneImg" src="static/img/phoneImg.png" />
              <div class="productImgCont">
                <img class="productImg" :src="productNavArr[productNavId].detailImg" />
              </div>
            </div>
            <div class="productInfo">
              <div class="productInfoName">{{productNavArr[productNavId].val}}</div>
              <div class="productInfoDes">
                <ul>
                  <li :key="index" v-for="(item,index) in productNavArr[productNavId].desArr">{{ item.val }}</li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="productCont hasBg" style="margin-top: 100px;">
      <div class="contName">
        <div class="contName_china">产品优势</div>
        <div class="contName_Eng">Shop join, advantages continue</div>
      </div>
      <div class="goodCont">
        <div class="goodLeft">
          <div class="goodTypeName">商家角度</div>
          <div class="goodItem" :key="index" v-for="(item,index) in goodArr">
            <img class="goodImg" :src="item.img" />
            <div class="goodText">
              <div class="goodName">
                <div class="goodLine"></div>
                <div>{{ item.name }}</div>
              </div>
              <div class="goodDes">{{ item.des }}</div>
            </div>
          </div>
        </div>
        <div class="goodRight">
          <div class="goodTypeName">用户角度</div>
          <div class="goodItem" :key="index" v-for="(item,index) in userGoodArr">
            <img class="goodImg" :src="item.img" />
            <div class="goodText">
              <div class="goodName">
                <div class="goodLine"></div>
                <div>{{ item.name }}</div>
              </div>
              <div class="goodDes">{{ item.des }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="productCont" v-if="false" style="margin-top: 100px;">
      <div class="contName">
        <div class="contName_china">产品用户端流程</div>
        <div class="contName_Eng">Order process</div>
      </div>
      <div class="orderStep">
        <img src="static/img/stepImg.png" />
      </div>
    </div>
    <div class="productCont hasBg" v-if="false" style="margin-top: 100px;">
      <div class="contName">
        <div class="contName_china">定制您的专属网店</div>
        <div class="contName_Eng">Customize your own shop</div>
      </div>
      <div class="portCont">
        <div class="portItem" :key="index" v-for="(item,index) in portArr">
          <div class="portMask">
            <div class="portBtn">开通{{ item.name }}</div>
          </div>
          <div class="portImg">
            <img :src="item.img" />
          </div>
          <div class="portName">{{ item.name }}</div>
          <div class="portDes">{{ item.des }}</div>
        </div>
      </div>
    </div>
    <div class="productCont" style="margin-top: 100px;">
        <div class="contName">
            <div class="contName_china">代理商加盟</div>
            <div class="contName_Eng">Benefits of merchant entry</div>
        </div>
        <div class="stepCont">
            <div class="stepItem" :key="index" v-for="(item,index) in stepArr">
            <div class="stepImg">
                <img :src="item.img" />
            </div>
            <div class="stepInfo">
                <div class="stepName">{{ item.name }}</div>
                <div class="stepVal">
                <ul>
                    <li :key="b" v-for="(a,b) in item.arr">{{ a.val }}</li>
                </ul>
                </div>
            </div>
            </div>
        </div>
      </div>
      <div class="productCont" id="JoinInput" style="margin-top: 100px;">
        <div class="contName">
            <div class="contName_china">申请成为代理</div>
            <div class="contName_Des">如果您对我们的产品感兴趣，想要进一步详细了解。请填写以下信息，我们将第一时间与您取得联系！</div>
        </div>
        <div class="sendCont">
            <div class="inputCont">
                <input type="text" placeholder="请输入您的姓名" />
            </div>
            <div class="inputCont">
                <input type="number" placeholder="请输入您的电话" />
            </div>
            <div class="inputCont">
                <input type="number" placeholder="请输入您的城市" />
            </div>
            <div class="subBtn">快速申请</div>
        </div>
      </div>
    <foot-com></foot-com>
  </div>
</template>

<script>
import topCom from '@/components/topCom';
import footCom from '@/components/footCom';
export default {
  components: {topCom,footCom},
  data() {
    return {
      navId:0,
      productNavArr:[
        {img:'static/img/shop.png',val:'同城购物',goodsImg:'static/img/shop_bg.png',detailImg:'static/img/shopDetail_bg.png',des:'',desArr:[
          {val:'同城购物、配送更快更方便。'},
          {val:'支持线下支付、一键下单极速发货'},
          {val:'送货上门、货到满意付款'},
        ]},
        {img:'static/img/lease.png',val:'同城房源',goodsImg:'static/img/lease_bg.png',detailImg:'static/img/leaseDetail_bg.png',des:'',desArr:[
          {val:'汇聚同城优质低价新房源、新楼盘。'},
          {val:'同城火爆商圈、旺铺、写字楼出租转租。'},
          {val:'同城二手房出售、房东直租低价房、价格便宜实惠。'},
          {val:'同城住房出租、海量房源出租信息一手掌握，房东直租无中介。'},
        ]},
        {img:'static/img/active.png',val:'美食娱乐',goodsImg:'static/img/active_bg.png',detailImg:'static/img/activeDetail_bg.png',des:'',desArr:[
          {val:'同城各类美食、娱乐尽在于此。'},
          {val:'团购套餐价格便宜实惠，套现优惠活动不断。'},
          {val:'无需线上支付预约,线上选套餐、线下直接消费，先消费后付款。'},
        ]},
        {img:'static/img/work.png',val:'同城就业',goodsImg:'static/img/work_bg.png',detailImg:'static/img/workDetail_bg.png',des:'',desArr:[
          {val:'覆盖同城全职、兼职职位招聘。'},
          {val:'在线编辑个人建立、一键投递心仪职位。'},
          {val:'同城企业直招，轻松帮您就业。'},
        ]},
        {img:'static/img/bindImg.png',val:'同城相亲',goodsImg:'static/img/blind_bg.png',detailImg:'static/img/blindDetail_bg.png',des:'',desArr:[
          {val:'同城相亲角、丰富相亲资源。'},
          {val:'在线编辑相亲资料、轻松找到心仪对象。'},
          {val:'助您轻松脱单！'},
        ]},
        {img:'static/img/carImg.png',val:'车辆交易',goodsImg:'static/img/car_bg.png',detailImg:'static/img/carDetail_bg.png',des:'',desArr:[
          {val: "海量车辆出售，车主直卖，无中间差价。"},
          {val: "高质量，高性价比，巨优惠。"},
          {val: "车主卖个好价钱、低价买个好车辆。"},
        ]},
        {img:'static/img/secondGoods.png',val:'同城二手',goodsImg:'static/img/second_bg.png',detailImg:'static/img/secondDetail_bg.png',des:'',desArr:[
          {val:'同城大量二手物品出售。'},
          {val:'高性价比，无中间差价。'},
          {val:'闲置物品，轻松出售。'},
        ]},
        {img:'static/img/help.png',val:' 同城代帮',goodsImg:'static/img/help_bg.png',detailImg:'',des:'',desArr:[
          {val:'同城代帮，轻松帮你解决搬家、排号。'},
          {val:'同城家政保洁、业务代办、推广引流、家具家电维修等业务。'},
        ]},
      ],
      productNavId:0,
      goodArr:[
        {img:'static/img/good14.png',name:'增加销售额',des:'多一份额外的线上销售渠道，线上轻松销售套餐及商品。'},
        {img:'static/img/good22.png',name:'0抽成',des:'商家入驻之后，所有销量成交量无限制，无论多少单平台0抽成，全归商家所有。'},
        {img:'static/img/good2.png',name:'高曝光',des:'聚集同城80%以上用户量，达到超高引流、曝光的效果，打响商家知名度。为商家带来更多的线到店消费用户。'},
        {img:'static/img/good21.png',name:'套餐商品无限量',des:'购物商家商品发布无限量，通知可上架上千商品出售；同城美食娱乐等商家套餐发布无限量。'},
      ],
      userGoodArr:[
        {img:'static/img/goodAll.png',name:'集合式平台',des:'一款软件即可满足用户吃喝住行等各类生活需求。'},
        {img:'static/img/noPay.png',name:'无需线上付款',des:'无论是购物还是餐饮团购，无需线上付款。不再担心退款问题及质量问题。网购0元下单，货到满意付款。'},
        {img:'static/img/goodHeight.png',name:'高性价比',des:'同城网购商品或餐饮团购价格便宜实惠。低于其他平台价格。'},
        {img:'static/img/good6.png',name:'操作简单',des:'产品为公众号，一键关注即可使用，操作简单，无需下载安装。'},
      ],
      portArr:[
        {img:'static/img/huaImg.png',name:'鲜花网店',des:'“绽放真情，私域花店，让每份礼物都如此精彩！”'},
        {img:'static/img/foodImg.png',name:'餐饮网店',des:' “美食之旅，从私域开始，口味原汁原味，尽在您的指尖！”'},
        {img:'static/img/dogImg.png',name:'宠物网店',des:' “宠爱无限，私域宠物店，为您的小伙伴带来专属的呵护！”'},
        {img:'static/img/yifuImg.png',name:'服装网店',des:' “时尚定义，私域时装店，演绎您的个性风采，成为流行风向标！”'},
        {img:'static/img/zxImg.png',name:'装修网店',des:'“打造梦想之家，私域装修店，让每一处空间都闪耀个性光芒！”'},
        {img:'static/img/lifaImg.png',name:'美容网店',des:' “焕发美丽，私域美容院，从头顶到脚尖，完美呈现！”'},
        {img:'static/img/shuiguoImg.png',name:'果铺网店',des:' “鲜果滋味，私域果铺，每一口都是自然的甜蜜！”'},
        {img:'static/img/anmoImg.png',name:'足浴网店',des:'“身心舒畅，私域足浴馆，为您带来身心完美放松！”'},
        {img:'static/img/qixiuImg.png',name:'汽修网店',des:'“行车保障，私域汽车修理厂，让您的座驾始终处于最佳状态！”'},
      ],
      shopNavArr:[
        {img:'static/img/homeIcon.png',val:'商家中心',goodsImg:'static/img/shopHome.png',desArr:[
          {val:'店铺个性展示： 店铺头像与背景图，展现独特魅力，引领潮流风向；'},
          {val:'粉丝与访客统计： 实时显示店铺粉丝数量与访客量，见证您的影响力与人气；'},
          {val:'订单收益一览： 累计收益、订单数量、本月收益、本月订单数量，清晰呈现您的业绩成果；'},
          {val:'多功能任务栏： 店铺编辑、优惠券设置、其他设置，为您提供便捷管理与个性化定制；'},
          {val:'会员特权尊享： 超级会员列表、会员充值记录，尊享特权，畅享尊贵服务；'},
          {val:'消费排行榜： 精准统计消费数据，展示店铺流量与成交情况。'},
        ]},
        {img:'static/img/shopSetIcon.png',val:'店铺设置',goodsImg:'static/img/shopSet.png',desArr:[
          {val:'个性化店铺形象： 店铺头像、店铺名称、店铺签名，展示独特魅力，树立个人品牌；'},
          {val:'便捷联系方式： 店铺联系电话、店铺地址设置，轻松畅通与顾客沟通；'},
          {val:'时尚公告消息： 店铺公告消息设置，即时发布促销活动、最新资讯，吸引更多关注；'},
          {val:'引人背景封面图： 店铺背景封面图设置，打造吸引眼球的视觉效果，增加店铺吸引力。'},
        ]},
        {img:'static/img/couponIcon.png',val:'优惠券设置',goodsImg:'static/img/shopCoupon.png',desArr:[
          {val:'灵活定制优惠券： 自主新增、删除优惠券，灵活应对各类促销需求；'},
          {val:'个性化设置： 满多少减多少，定制优惠力度，让优惠更贴心；'},
          {val:'精准时间掌控： 设置优惠券到期时间，把握促销节点，助您销量飙升；'},
          {val:'商家专属定义： 商家可自行定义优惠券，打造独特品牌形象，吸引更多顾客青睐。'},
        ]},
        {img:'static/img/shopOtherSetIcon.png',val:'其他设置',goodsImg:'static/img/otherSet.png',desArr:[
          {val:'尊贵超级会员特权： 商家可自定义年费超级会员设置，包括年费会员费用与折扣，让您的会员尊享独特特权，提升忠诚度；'},
          {val:'便捷外卖配送管理： 商家可灵活设置外卖配送信息，包括外卖配送费和起送金额，为您的外卖业务提供定制化服务，吸引更多顾客。'},

        ]},
        {img:'static/img/vipIcon.png',val:'会员列表',goodsImg:'static/img/vipRecord.png',detailImg:'static/img/vipList.png',desArr:[
          {val:'会员充值记录一目了然： 实时展示每位会员的充值情况，包含头像、昵称、充值金额、订单号、充值时间，透明呈现每一笔交易；'},
          {val:'灵活筛选： 按日期筛选会员充值记录，轻松查找所需信息，提升操作效率；'},
          {val:'个性折扣特权： 显示每个会员享受的折扣，彰显尊贵特权，增加会员满意度。'},
        ]},
        {img:'static/img/shopSortIcon.png',val:'消费排行',goodsImg:'static/img/shopRecord.png',detailImg:'',desArr:[
          {val:'畅享消费排名： 实时展示消费者的排名，了解消费动态；'},
          {val:'瞬间洞察消费金额： 明晰呈现每位消费者的消费金额，洞察消费状况；'},
        ]},
        {img:'static/img/orderIcon.png',val:'订单情况',goodsImg:'static/img/shopOrder.png',detailImg:'static/img/shopOrderDetail.png',desArr:[
          {val:'智能订单管理： 清晰展示订单列表，配备快速搜索和分类功能，助您轻松管理订单；'},
          {val:'清便捷操作体验： 灵活的订单接单与驳回功能，让您随心处理每一笔交易；'},
          {val:'详尽订单详情： 深入了解每个订单的具体情况，包括订单详情信息，为您提供全方位服务支持。'},
        ]},
        {img:'static/img/shopGoodsIcon.png',val:'店铺商品',goodsImg:'static/img/shopGoods.png',detailImg:'static/img/shopGoodsAdd.png',desArr:[
          {val:'精品商品一目了然： 清晰展示店铺商品列表，便于实时了解商品动态；'},
          {val:'灵活操作体验： 支持商品的删除、新增和编辑功能，让您随时调整商品信息；'},
          {val:'个性化商品定价： 新增商品可自定义活动标签，自由设置售价，满足不同需求。'},
        ]},
      ],
      shopNavId:0,
      stepArr:[
        {img:'static/img/number1.png',name:'代理商介绍',arr:[
          {val:'《本地鸟生活服务》总公司会把空白城市的经营权交给城市代理商，总部提供平台、技术及服务等支持，城市运营商利用自己的资源，开发当地同城购物、同城房源、同城美食娱乐、同城职位就业、同城相亲、同城二手物品交易、全国车辆交易等本地生活服务类市场'},
        ]},
        {img:'static/img/number2.png',name:'加盟条件',arr:[
          {val:'具备法人资格的公司，个体工商户或个人'},
          {val:'熟悉本地生活服务行业优先'},
          {val:'本地生活服务领域有一定资源或者熟悉互联网推广模式优先'},
        ]},
        {img:'static/img/number3.png',name:'盈利模式',arr:[
          {val:'收取入驻商家一次性入驻费用'},
          {val:'后续商家会员费用'},
          {val:'商家广告投放费用'},
          {val:'平台其他发布费用'},
        ]},
        {img:'static/img/number4.png',name:'可享权益',arr:[
          {val:'一对一产品全体系培训；专业性运营协助。'},
          {val:'总部负责文案撰写及设计支持，降低人力成本。'},
          {val:'培训运营经验，盈利模式。'},
          {val:'完善的技术团队，提供完整的技术支撑与新功能开发。'},
          {val:'代理商的唯一性，一个城市仅有唯一的一个代理商资格。'},
          {val:'加入《本地鸟生活服务》代理商的门槛低,投入资金较少。'},
        ]},
      ],
    };
  },
  props: {},
  methods: {
    productNavFn(index){
      this.productNavId = index
    },
    shopNavFn(index){
      this.shopNavId = index
    },
  },
  mounted() {},
  created() {}
};
</script>

<style scoped lang="less">
.container{
  width: 100%;
  
  .bannerCont{
    width: 100%;
    background-color: #fdf4e9;
    .bannerMask{
      width: 100%;
      padding: 150px 100px 50px;
      box-sizing: border-box;
      justify-content: center;
      align-items: center;
      display: flex;
      color: #ff8c00;
      img{
        height: 500px;
      }
      .maskLeft{
        margin-right: 150px;
        .maskTitle{
          font-size: 40px;
          margin-bottom: 20px;
        }
        .maskdes{
          font-size: 24px;
          margin-bottom: 30px;
        }
        .maskVal{
          font-size: 16px;
          p{
            margin: 5px 0;
          }
        }
        .maskBtn{
          margin-top: 50px;
          width: 160px;
          // background-color: #fff;
          color: #ff8c00;
          border-radius: 30px;
          line-height: 44px;
          border: 1px solid #ff8c00;
          text-align: center;
          cursor: pointer;
          transition: all 0.15s linear;
          display: block;
          text-decoration: none;
        }
        .maskBtn:hover{
          background-color: #ff8c00;
          border:1px solid #ff8c00;
          color: #fff;
        }
      }
    }
  }
  .productCont{
    width: 90%;
    margin: 50px auto;
    .contName{
      width: 100%;
      text-align: center;
      color: #ff8c00;
      .contName_china{
        font-size: 30px;
        font-weight: bold;
      }
      .contName_Eng{
        font-family: serif;
        font-size: 16px;
      }
      .contName_Des{
        margin-top: 10px;
      }
    }
    .productMain{
      margin-top: 50px;
      display: flex;
      .productNav{
        border-radius: 10px;
        overflow: hidden;
        .productNavItem,.productNavItemActive{
          width: 200px;
          padding: 0 15px;
          height: 55px;
          display: flex;
          align-items: center;
          background-color: #ff8c00;
          cursor: pointer;
          border-bottom: 1px solid #fff;
          img{
            width: 35px;
            height: 35px;
            margin-right: 15px;
          }
          .productNavName{
            font-size: 18px;
          }
        }
        .productNavItem{
          background-color:#fdf4e9;
        }
        .productNavItemActive{
          color: #fff;
        }
      }
      .productSwiper{
        flex: 1;
        width: 200px;
        margin-left: 50px;
        .productItem{
          width: 100%;
          display: flex;
          .phoneBox{
            width: 280px;
            position: relative;
            text-align: center;
            margin-right: 30px;
            img{
              width: 100%;
            }
            .phoneImg{
              position: absolute;
              top: 0;
              left: 0;
              z-index: 2;
            }
            .productImgCont{
              width: 245px;
              margin: 0 auto;
              overflow: hidden;
              border-radius: 10px;
              margin-top: 10px;
            }
            .productImg{
              width: 100%;
              border-radius: 20px;
            }
          }
          .productInfo{
            flex: 1;
            width: 100px;
            margin-left: 50px;
            .productInfoName{
              font-size: 25px;
            }
            .productInfoDes{
              font-size: 18px;
              margin-top: 30px;
              ul{
                padding-left: 0;
                li{
                  margin-bottom: 15px;
                }
              }
            }
          }
        }
      }
    }
    .portCont{
      width: 100%;
      margin-top: 30px;
      justify-content: space-between;
      background-color: #fdf4e9;
      display: flex;
      flex-wrap: wrap;
      .portItem{
        width: 21%;
        margin: 20px 6%;
        text-align: center;
        background-color: #fff;
        padding: 15px;
        box-sizing: border-box;
        background-color: #ff8c00;
        border-radius: 15px;
        color: #fff;
        overflow: hidden;
        position: relative;
        .portMask{
          width: 100%;
          height: 100%;
          left: 0;
          top: 0;
          position: absolute;
          background-color: rgba(0, 0, 0, 0.3);
          display: flex;
          justify-content: center;
          align-items: center;
          opacity: 0;
          transition: all 0.3s linear;
          .portBtn{
            width: 150px;
            background-color: #fff;
            color: #ff8c00;
            line-height: 40px;
            border-radius: 25px;
            cursor: pointer;
          }
        }
        .portImg{
          width: 100%;
          text-align: center;
          img{
            width: 35%;
          }
        }
        .portName{
          font-size: 22px;
          font-weight: bold;
          margin-bottom: 10px;
        }
        .portDes{

        }
      }
      .portItem:hover .portMask{
        opacity: 1;
      }
    }
    .orderStep{
      width: 100%;
      img{
        width: 100%;
      }
    }
    .goodCont{
      width: 100%;
      display: flex;
      padding: 30px 50px;
      box-sizing: border-box;
      justify-content: space-between;
      .goodLeft,.goodRight{
        width: 48%;
        .goodTypeName{
          text-align: center;
          font-size: 28px;
          color: #ff8c00;
        }
        .goodItem{
        width: 100%;
        margin: 0 2.5%;
        // background-color: #ff8c00;
        padding: 30px;
        box-sizing: border-box;
        border-radius: 15px;
        display: flex;
        align-items: center;
        margin-bottom: 30px;
        .goodImg{
          width: 100px;
        }
        // color: #fff;
        .goodText{
          margin-left: 30px;
          color: #666;
          .goodName{
            font-size: 24px;
            margin-bottom: 15px;
            display: flex;
            align-items: center;
            color: #000;
            // color: #ff8c00;
            .goodLine{
              width: 3px;
              height: 24px;
              background-color: #ff8c00;
              border-radius: 2px;
              margin-right: 10px;
            }
          }
        }
      }
      }
    }
    .stepCont{
      width: 100%;
      display: flex;
      margin-top: 20px;
      flex-wrap: wrap;
      .stepItem{
        width: 80%;
        margin: 30px auto;
        box-sizing: border-box;
        display: flex;
        .stepImg{
          width: 60px;
          height: 60px;
          font-size: 0;
          border-radius: 50%;
          background-color: #ff8c00;
          justify-content: center;
          display: flex;
          align-items: center;
          margin-right: 15px;
          img{
            width: 70%;
          }
        }
        .stepInfo{
          width: 10px;
          flex: 1;
          .stepName{
            font-size: 24px;
            font-weight: bold;
            line-height: 60px;
          }
          ul{
            padding-left: 0;
            li{
              margin-bottom: 10px;
            }
          }
        }
      }
    }
    .sendCont{
        display: flex;
        width: 100%;
        margin: 30px auto;
        background-color: #fdf4e9;
        padding: 15px;
        // justify-content: space-between;
        box-sizing: border-box;
        border-radius: 5px;

        .inputCont{
            background-color: #fff;
            padding: 15px 15px;
            box-sizing:border-box;
            border-radius: 5px;
            flex: 1;
            margin-right: 20px;
            input{
                width: 100%;
                background: none;
                border: none;
                outline: none;
                color: #ff8c00;
            }
        }
        .subBtn{
            line-height: 54px;
            width: 180px;
            text-align: center;
            background-color:#ff8c00;
            color: white;
            border-radius: 5px;
            cursor: pointer;
            transition: all 0.2s linear;
        }
        .subBtn:hover{
            opacity: 0.7;
        }
      }
  }
  .hasBg{
    background-color: #fdf4e9;
    padding: 50px 0;
    border-radius: 15px;
  }
  
}
</style>
